{% extends 'admin/base/base.html' %}


{% block title %}
  文档发布页
{% endblock %}

{% block content_header %}
  文档发布
{% endblock %}

{% block header_option_desc %}
  书是人类进步的阶梯
{% endblock %}


{% block content %}
  <div class="row">
    <div class="col-md-12 col-xs-12 col-sm-12">
      <div class="box box-primary">
        <div class="box-body">
          <div class="form-group" style="margin-top: 30px;">
            <label for="news-title">文档标题(150个字以内)</label>
            {% if doc %}
              <input type="text" class="form-control" id="news-title" name="news-title" placeholder="请输入文档标题"
                     value="{{ doc.title }}">
            {% else %}
              <input type="text" class="form-control" id="news-title" name="news-title" placeholder="请输入文档标题"
                     autofocus>
            {% endif %}
          </div>

          <div class="form-group" id="container">
            <label for="news-thumbnail-url">文档缩略图</label>
            <div class="input-group">
              {% if doc %}
                <input type="text" class="form-control" id="news-thumbnail-url" name="news-thumbnail-url"
                       placeholder="请上传图片或输入文档缩略图地址" value="{{ doc.image_url }}">
              {% else %}
                <input type="text" class="form-control" id="news-thumbnail-url" name="news-thumbnail-url"
                       placeholder="请上传图片或输入文档缩略图地址">
              {% endif %}

              <div class="input-group-btn">
                <label class="btn btn-default btn-file">
                  上传至服务器 <input type="file" id="upload-image-server">
                </label>
                <button class="btn btn-info" id="upload-image-btn">上传至七牛云</button>
              </div>
            </div>
          </div>

          <div class="form-group">
            <div class="progress-bar" style="display: none">
              <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0;">0%</div>
            </div>
          </div>


          <div class="form-group">
            <label for="news-desc">文档描述</label>
            {% if doc %}
              <textarea name="news-desc" id="news-desc" placeholder="请输入文档描述" class="form-control"
                        style="height: 8rem; resize: none;">{{ doc.desc }}</textarea>
            {% else %}
              <textarea name="news-desc" id="news-desc" placeholder="请输入文档描述" class="form-control"
                        style="height: 8rem; resize: none;"></textarea>
            {% endif %}
          </div>

          <div class="form-group">
            <label for="docs-file-url">文档URL地址</label>
            <div class="input-group">
              {% if doc %}
                <input type="text" class="form-control" id="docs-file-url" name="docs-file-url"
                       placeholder="请上传文档或输入文档地址" value="{{ doc.file_url }}">
              {% else %}
                <input type="text" class="form-control" id="docs-file-url" name="docs-file-url"
                       placeholder="请上传文档或输入文档地址">
              {% endif %}

              <div class="input-group-btn">
                <label class="btn btn-default btn-file">
                  上传至服务器 <input type="file" id="upload-file-server">
                </label>
              </div>
            </div>
          </div>


        </div>
        <div class="box-footer">
          {% if doc %}
            <a href="javascript:void (0);" class="btn btn-primary pull-right" id="btn-pub-news"
               data-news-id="{{ doc.id }}">更新文档 </a>
          {% else %}
            <a href="javascript:void (0);" class="btn btn-primary pull-right" id="btn-pub-news">发布文档 </a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block script %}

  <!-- 七牛云 客户端 并不经过服务端 服务器需要提供 token -->
  <script src="https://cdn.bootcss.com/plupload/2.1.9/moxie.min.js"></script>
  <script src="https://cdn.bootcss.com/plupload/2.1.9/plupload.dev.js"></script>
  <script src="https://cdn.bootcss.com/qiniu-js/1.0.17.1/qiniu.min.js"></script>
  <!--一定要在下面 js 文件顺序很重要 -->
  <script src="{% static 'js/admin/base/fqiniu.js' %}"></script>
  <script src="{% static 'js/admin/doc/doc_pub.js' %}"></script>
{% endblock %}
